<template lang="jade">
#reservation.borrow-lending
  //- .header
    a.backup.icon-angle-left(href='javascript:history.go(-1)')
    h1.page-title 我的预约
  .seperate
  #reservation-list.current-list
    .weui-loadmore.weui-loadmore_line(v-show="empty")
      .weui-loadmore__tips 暂无数据
    .list-item(v-for="booking in bookings")
      .weui-media-box.weui-media-box_appmsg
        .weui-media-box__hd.hidden
          img.weui-media-box__thumb(:src='getCover(booking.Biblio)')
        .weui-media-box__bd
          h3.books-name {{ booking.Biblio.TITLE }}
          .author 作者 {{ booking.Biblio.AUTHOR }}
          div(v-if="booking.STATUS === 'QUEUED'")
            a.btn-bluelight.weui-btn.weui-btn_mini.weui-btn_primary(@click.stop='cancel(booking.BOID)') 取消预约
      .bottom.weui-flex
        .giveback-date.weui-flex__item 预约时间: {{ booking.REGTIME }}
        .status-normal {{ statusLabel(booking.STATUS) }}
</template>

<script>
import api from '../../api-new'
import { mapGetters } from 'vuex'

export default {
  data () {
    return {
      bookings: [],
      ...mapGetters(['loginId'])
    }
  },
  computed: {
    empty () {
      return this.bookings.length === 0
    }
  },
  created () {
    const patronId = this.$cookie.get('uid')
    api.reservations({ patronId }).then(data => {
      this.bookings = data.data.data
    },
    error => {
      window.alert(error.message)
      console.error(error)
    })
  },
  methods: {
    statusLabel (status) {
      switch (status) {
        case 'QUEUED':
          return '排队中'
        case 'CANCELLED':
          return '已取消'
        default:
          return status
      }
    },
    cancel (bookingId) {
      const patronId = this.$cookie.get('uid')
      return api.unReserve({ bookingId, patronId }).then(resp => {
        window.location.reload()
      })
    },
    getCover (book) {
      return `http://dev.unionlib.com:8180/UNIONAPI/util/cover?isbn=${book.ISBN}`
    }
  }
}
</script>

<style lang='scss'>
</style>
